<template>
  <div id="app" class="hbmanage">
    <div class="search">
    <div class="selectOption">
              <el-button type="success" @click='addAdvertisers'> 添加红包</el-button>
    </div>
    </div>
    <!--红包管理列表-->
    <div class="contain_two" style="min-width: 675px;">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>
              <div class="">
                <span>#</span>
              </div>
            </th>
            <th class=""><span>红包名称</span></th>
            <th>
              <div class="">
                <span>红包起止时间</span>
              </div>
            </th>

            <th><span>被抢红包金额</span></th>

            <th class=""><span>被抢红包次数</span></th>
            <th class=""><span>分享红包金额</span></th>
            <th class=""><span>分享红包次数</span></th>
            <th><span>红包投放状态</span></th>
            <th class=""><span>操作</span></th>
          </tr>
        </thead>
        <tbody id="staff_info" class="">
          <tr class="contLi" v-for="(list,index) in tableData">
            <td>
              <div class=""><span class="">{{index+1}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.paketName}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.createDate}} —— {{list.endTime}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.paketMoney}}</span>/<span class="" style="color:#4FAEC4">{{list.initialPaketMoney}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.paketServings}}</span>/<span class="" style="color:#4FAEC4">{{list.initialPaketServings}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.shareMoney}}</span>/<span class="" style="color:#4FAEC4">{{list.initialShareMoney}}</span></div>
            </td>
            <td>
              <div class=""><span class="">{{list.shareServings}}</span>/<span class="" style="color:#4FAEC4">{{list.initialShareServings}}</span></div>
            </td>
            <td>
              <div class="">
                <span class="">{{list.state}}</span>
               </div>
            </td>
            <td class="">
              <!--<el-button type="info">记录</el-button>-->
              <el-button type="info" @click="detailfn(index)">详情</el-button>
              <el-button type="danger" @click="open2(index)">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="block pagination" v-show='nullContentPagination'>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </div>
      <div class="nullContent" v-show='nullContent'>暂无数据</div>
    </div>
    <!--详情-->
    <div class="tankuang" id="red_detial" v-show="hbdetail">
      <div class="bomb">
        <div class="bomb_header">
          <p>红包详情</p>
          <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
        </div>
        <div class="bomb_content" style="height: 460px;border-bottom: none;">
          <p>
                        <span>红包图片：</span><img :src="logo" alt="" class="red_img" width="60px"/>
                    </p>
                    <p class="fl">
                        <span>红包名称：</span><span class="red_name">{{list.paketName}}</span>
                    </p>
                    <p class="fr">
                        <span>红包摘要：</span><span class="red_abstract">{{list.paketDescribe}}</span>
                    </p>
                    <br/>
                    <p class="fl">
                        <span>红包起止时间：</span><span class="start_time">{{list.createDate}}</span>
                    </p>
                    <p class="fr">
                        <span>红包终止时间：</span><span class="end_time">{{list.endTime}}</span>
                    </p>
                    <p class="fl">
                        <span>被抢红包金额：</span><span class="red_num1">{{list.paketMoney}}/{{list.initialPaketMoney}}</span>
                    </p>
                    <p class="fr">
                        <span>被抢红包次数：</span><span class="red_num3">{{list.paketServings}}/{{list.initialPaketServings}}</span>
                    </p>
                    <p class="fl">
                        <span>分享红包金额：</span><span class="red_num2">{{list.shareMoney}}/{{list.initialShareMoney}}</span>
                    </p>

                    <p class="fr">
                        <span>分享红包次数：</span><span class="red_num4">{{list.shareServings}}/{{list.initialShareServings}}</span>
                    </p>
                    <p class="fl">
                        <span>红包投放状态：</span><span class="release_zt">{{list.state}}</span>
                    </p>
                    <div class="clear"></div>
                    <div id="ad_queue" class="fl">
                        <span>广告队列：</span><span class="adv_queue"></span>
                        <ul class="queueinp" style="display: none">

                        </ul>
                    </div>
                    <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!--添加红包弹窗-->
    <div class="tankuang" v-show="adverShow">
      <div class="bomb" style="width: 780px;height: 600px;">
        <div class="bomb_header">
          <p>添加红包</p>
          <span @click="closes"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
        </div>
        <div class="bomb_content" style="height:452px;">
          <p style="position: relative;float: left;width:100%;">
              <span>红包图片：</span>
              <img :src="hbImg"
                alt="" class="logo_img" width="80" height="80" @click="uploads">
                <input type="file" style="display: none" accept="image/jpeg,image/jpg,image/png"
                  name="file" id="logofiles" class="" @change="onFileChange" />
                <span class="egRatio">图片上传尺寸比例为：1:1 （建议尺寸:1000*1000 单位：像素）</span>
            </p>
            <div class="clear"></div>
            <p style="float: left;width:100%;">
              <span>红包名称：</span>
              <input maxlength="10" type="text" v-model="redpackName" placeholder="请填写红包名称" id="adname">
            </p>
            <div class="clear"></div>
            <p style="float: left;width:100%;">
              <span>红包摘要：</span>
              <input type="text" v-model="abstract" placeholder="请填写红包摘要" id="adname">
            </p>
            <div class="clear"></div>
            <div class="half">
              <p class="fl">
              <span>被抢金额：</span>
              <input type="text" v-model="robbedMoney" placeholder="请填写被抢红包金额" id="" maxlength="9" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
            </p>
            <p class="fr">
              <span>被抢个数：</span>
              <input type="text" v-model="robbedCopies" placeholder="请输入被抢红包个数" id="" maxlength="9" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
            </p>
            <p class="fl">
              <span>分享金额：</span>
              <input type="text" v-model="shareMoney" placeholder="请填写分享红包金额" id="" maxlength="9" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
            </p>
            <p class="fr">
              <span>分享个数：</span>
              <input type="text" v-model="shareCopies" placeholder="请输入分享红包个数" id="" maxlength="9" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
            </p>
            <p class="fl">
              <span>发布时段：</span>
          <el-date-picker v-model="releaseStart" type="datetime" placeholder="请选择红包发布时间" :editable='false'>
          </el-date-picker>
            </p>
            <p class="fr">
              <span style="margin-left: 20px;">至：</span>
               <el-date-picker v-model="endStrop" type="datetime" placeholder="请选择红包停止时间" :editable='false'>
             </el-date-picker>
            </p>
            </div>
            <div class="clear"></div>
             <p class="aa">
              <span>广告队列：</span>
              <el-button type="success" icon="plus" @click='hqad' size="small"> 获取广告</el-button><small style="margin-left: 10px;">(选填)</small>
            </p>
            <ul v-show="adqueue" class="queuebox">
              <li @click="checkadv(index)" v-for="(list,index) in queueData">
                <div class="checkShall"><img src="../../assets/images/dui.png" alt="" width="30px" style="right: 0;position: absolute;bottom: 0;"></div>
                <div class="advlist"> 
                  <div class="advImg"><img :src="list.advLink" alt="" width="60px"></div>
                  <p>{{list.advTitle}}</p>
                </div>
                <input type="hidden" :value="list.id">
              </li>
            </ul>
        </div>
        <div class="bomb_footer">
          <input type="button" @click="hbedixbtn()" value="保存"> 
          <input type="button" @click="cancels" value="取消"> 
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
// 导入地址数据 
import addressData from '../../assets/js/addressData.js'
// 加载地址数据
function formatData(data) {
  return data
}
export default {
  name: 'hbmanage',
  data() {
    return { 
      nullContent: false,
       nullContentPagination: true,   
      hbdetail:false,  
      hbImg:'../../../static/img/icon_xinjian_picture@2x.png',
      advHomer:'',
      advTitle:'',
      total:0,
      currentPage: 1,
      value1: '',
      adverShow: false,
      tableData: [],
      lists: [],
      list:{},
      logo:'',
      redpackName:'',
      robbedMoney:'',
      shareMoney:'',
      robbedCopies:'',
      shareCopies:'',
      releaseStart:'',
      endStrop:'',
      abstract:'',
      adqueue:false,
      queueData:[],
    }
  },
  created: function () {
    this.gethbmanage(1)
  },
  methods: {
    // 提示
    warning:function(){
         this.$message({
          message: '请选择正确图片格式!',
          type: 'warning'
        });
    },
       // 选择图片上传
      onFileChange(e) {
          var self = this
          var files = e.target.files || e.dataTransfer.files;
          var fileData  = files[0]
          //读取图片数据
                var reader = new FileReader();
                reader.onload = function (e) {
                     var data = e.target.result;
                    //加载图片获取图片真实宽度和高度
                     var image = new Image();
                     image.onload=function(){
                         var width = image.width;
                         var height = image.height;
                         if(width !== height){
                           self.warning()
                            return
                         }else{
                           self.uploadImage(files[0]);
                         }
                     };
                     image.src= data;
                 };
                 reader.readAsDataURL(fileData);
      },
      // 上传图片
      uploadImage(file) {
          var formdata = new FormData();
          formdata.append('appId', "com_sxluckyking_double");
          formdata.append('appName', 'uploadFile');
          formdata.append('file', file);
          this.uploadFile(formdata).then((data) => {
              console.log(data);
              if (data.code === 200) {
                   this.$message({
                      message: '上传图片成功',
                      type: 'success'
                    });
                  this.hbImg = data.data[0].path;
              } else {
                  this.$message.error('上传图片失败');
              }
          }).catch(msg => console.log(msg));
      },
    // 获取广告队列
    hqad(){
      let token = sessionStorage.token;
      this.adqueuelist({
        pageSize: 10,
        pageNo: 1,
        token: token
      }).then((data)=>{
        console.log(data,'广告队列')
        if(data.code == 200){
          this.queueData = data.data
        }else{
          this.$message('error')
        }
        
      }).catch(msg => console.log(msg));
      this.adqueue = true
    },
    uploads: function () {
      $("#logofiles").click();
    },
    cancels: function () {
      this.adverShow = false;
    },
    closes:function(){
      this.hbdetail = false
      this.adverShow = false
    },
    addAdvertisers:function(){
      this.adverShow = true
    },
    checkadv(index){
      if($(".queuebox li").eq(index).find('.checkShall').prop('class').indexOf('checkedShall')!= -1){
        $(".queuebox li").eq(index).find('.checkShall').removeClass('checkedShall')
      }else{
        $(".queuebox li").eq(index).find('.checkShall').addClass('checkedShall')
      }
    },
    // 获取红包管理页面数据
    gethbmanage(i) {
      this.$store.commit('showLoading');
      let token = sessionStorage.token;
      this.gethbmanagelist({
        pageSize: 10,
        pageNo: i,
        token: token
      }).then((data) => {
        this.$store.commit('hiddenLoading');
        console.log(data);
        if (data.code === 200) {
          this.nullContent = false;
          this.nullContentPagination = true;
          if (data.data.list.length == 0) {
              this.nullContent = true;
              this.nullContentPagination = false;
              return;
          }
          this.total = data.data.count;
          for (let i = 0; i < data.data.list.length; i++) {
            data.data.list[i].paketName = data.data.list[i].paketName;
            data.data.list[i].createDate = this.formatDate(data.data.list[i].handedTime);
            data.data.list[i].endTime = this.formatDate(data.data.list[i].endTime);
            data.data.list[i].initialPaketMoney = data.data.list[i].initialPaketMoney;
            data.data.list[i].initialPaketServings = data.data.list[i].initialPaketServings;
            data.data.list[i].initialShareMoney = data.data.list[i].initialShareMoney;
            data.data.list[i].initialShareServings = data.data.list[i].initialShareServings;

            data.data.list[i].paketMoney = data.data.list[i].paketMoney;
            data.data.list[i].paketServings = data.data.list[i].paketServings;
            data.data.list[i].shareMoney = data.data.list[i].shareMoney;
            data.data.list[i].shareServings = data.data.list[i].shareServings;

            if(data.data.list[i].state == '1'){
              data.data.list[i].state = '待投放'
            }else if(data.data.list[i].state == '2'){
              data.data.list[i].state = '投放中'
            }else if(data.data.list[i].state == '3'){
              data.data.list[i].state = '已结束'
            }
          }
          this.tableData = data.data.list;
        } else {
          this.$message(data.message)
        }
      }).catch(msg => console.log(msg));
    },
    // 红包管理页面删除
    hbmanageDel(i){
      this.hbmanageDellist({
        id:this.tableData[i].id,
        token:sessionStorage.token
      }).then((data)=>{
        console.log(data)
        if (data.code === 200) {
            this.gethbmanage(this.currentPage)
        } else {
             this.$message('删除失败')
        }
      }).catch(msg => console.log(msg));     
    },
    open2(index) {
      console.log(index)
      console.log(this.tableData[index].id)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.hbmanageDel(index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    //  红包管理页面详情
    detailfn(index){
      this.hbdetail = true
      this.hbdetaillist({
        id:this.tableData[index].id,
        token:sessionStorage.token
      }).then((data)=>{
        if (data.code === 200) {
            console.log(data,'详情数据')
            this.logo = data.data.redpaket.logo
            this.list.paketName = data.data.redpaket.paketName
            this.list.paketDescribe = data.data.redpaket.paketDescribe
            this.list.createDate = this.formatDate(data.data.redpaket.createDate)
            this.list.endTime = this.formatDate(data.data.redpaket.endTime)
            this.list.initialPaketMoney = data.data.redpaket.initialPaketMoney
            this.list.initialPaketServings = data.data.redpaket.initialPaketServings
            this.list.initialShareMoney = data.data.redpaket.initialShareMoney
            this.list.initialShareServings = data.data.redpaket.initialShareServings
            this.list.paketServings = data.data.redpaket.paketServings
            this.list.paketMoney = data.data.redpaket.paketMoney
            this.list.shareMoney = data.data.redpaket.shareMoney
            this.list.shareServings = data.data.redpaket.shareServings
            this.list.state = data.data.redpaket.state == '1' ? '待投放' : '已结束';
            // this.list.logo = data.data.redpaket.logo
            console.log(this.list)
            // this.gethbmanage(this.currentPage)
        } else {
             this.$message(data.message)
        }
      }).catch(msg => console.log(msg))
    },
    // 判断
    panduan() {
    if (this.redpackName == null || this.redpackName == "") {
        this.$message("请输入红包名称");
        return false;
    } else if (this.redpackName.length > 15) {
        this.$message("红包名称不可以超过15个字符");
        return false;
    }
    if(this.abstract != null  || this.abstract != ""){
        if (this.abstract.length > 25) {
            this.$message("请输入等红包摘要不可以超过25个字符级数字");
            return false;
        }
    }
    if (this.robbedMoney == null || this.robbedMoney == "") {
        this.$message("请输入被抢红包金额");
        return false;
    } 
    if (this.robbedCopies == null || this.robbedCopies == "") {
        this.$message("请输入被抢红包个数");
        return false;
    } 
    if (this.shareMoney !== null && this.shareMoney !== "") {
        if (this.shareCopies == null || this.shareCopies == "") {
            this.$message("请输入分享红包个数");
            return false;
        }
    } else {
        if (this.shareMoney !== null && this.shareMoney !== "") {
            this.$message("请输入分享红包金额");
            return false;
        }
    }
    if(parseFloat(this.robbedMoney)/parseFloat(this.robbedCopies) < 0.01){
        this.$message("单个被抢红包金额不能小于0.01");
        return false;
    }
    if(parseFloat(this.shareMoney)/parseFloat(this.shareCopies) < 0.01){
        this.$message("单个分享红包金额不能小于0.01");
        return false;
    }
    if (this.releaseStart == null || this.releaseStart == "") {
        this.$message("请输入红包发布时间");
        return false;
    } else if (this.endStrop == null || this.endStrop == "") {
        this.$message("请输入红包结束时间");
        return false;
    } else if (this.releaseStart >= this.endStrop) {
        this.$message("红包发布时间不可以大于红包结束时间");
        return false;
    }else if (this.releaseStart <= new Date()) {
        this.$message("红包发布时间不可以小于或等于当前时间");
        return false;
    }
    if (this.hbImg == "../../../static/img/icon_xinjian_picture@2x.png") {
        this.$message("请选择红包图片");
        return false;
    }
    return true;
},
    // 红包管理添加下的保存
    hbedixbtn(){
      console.log(this.releaseStart)
      if(this.panduan() == false){
        return
      }else{
     var advJson = ""; //广告队列
     for (var i = 0; i < $(".queuebox li").length; i++) {
            if ($(".queuebox li").eq(i).find('.checkShall').prop("class").indexOf("checkedShall") != -1) {
                advJson += $(".queuebox li").eq(i).find("input").val() + ",";
            }
        }
      this.hbedixbtnlist({
        token:sessionStorage.token,
        logo: this.hbImg,//红包图片
        paketName: this.redpackName,//红包名称
        paketMoney: this.robbedMoney,//被抢金额
        shareMoney: this.shareMoney = this.shareMoney == '' ?　'0' : this.shareMoney, //分享金额
        paketServings: this.robbedCopies,//被抢个数
        shareServings: this.shareCopies = this.shareCopies == '' ?　'0' : this.shareCopies,//分享个数
        handedTime: this.UnFormatDate(this.releaseStart),//开始时间
        endTime: this.UnFormatDate(this.endStrop),//结束时间
        advJson: advJson,//广告队列
        paketDescribe: this.abstract//红包摘要
      }).then((data)=>{
        console.log(data)
          if(data.code == 200){
            this.cancels()
            this.gethbmanage(this.currentPage)
          }else{
            this.$message(data.message)
          }
      }).catch(msg => console.log(msg))
      }
    },
    
    // 格式化日期
    formatDate(date){
      var y,m,d,h,i,s
      var t = new Date(parseInt(date))
      y = t.getFullYear()
      m = t.getMonth() + 1
      d = t.getDate()
      h = t.getHours()
      i = t.getMinutes()
      s = t.getSeconds()
return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' '
            + (h < 10 ? '0' + h : h) + ':'+ (i < 10 ? '0' + i : i) + ':'+ (s < 10 ? '0' + s : s) 
    },
    // 请求格式化日期
    UnFormatDate(date) {
      var y,m,d,h,i
      var t = new  Date(date)
        y = t.getFullYear()
        m = t.getMonth() + 1
        d = t.getDate()
        h = t.getHours()
        i = t.getMinutes()
 return y + '/' + (m < 10 ? '0' + m : m) + '/' + (d < 10 ? '0' + d : d) + ' '
                + (h < 10 ? '0' + h : h) + ':'+ (i < 10 ? '0' + i : i) 

      },
    // 分页跳转
    handleCurrentChange(val) {
        this.currentPage = val;
        this.gethbmanage(val);
    },
    
...mapActions(['gethbmanagelist','hbmanageDellist','hbdetaillist','hbedixbtnlist','adqueuelist','uploadFile'])

  }
}

</script>
<style scoped>
.el-button--success{
  width: 96px;
  margin-top: 2px;
}
  /*.modal-content select {
    float: left;
    width: 100px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    margin-left: 26px;

  }*/
  
  .add_reward {
    background: rgb(82, 186, 130);
    border-radius: 5px;
    width: 115px;
    height: 36px;
    border: none;
    margin-left: 45px;
    color: #fff;
  }
  
  th,
  td {
    text-align: center;
  }
  
  .contain_two {
    margin-top: 15px;
  }
  
  .tankuang {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: auto;
    z-index: 1500;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  
    .bomb_content p {
    text-align: left;
    margin: 10px 0;
  }
  
   .bomb_content input[type=text] {
    width: 256px;
    height: 36px;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
  }
  
  .bomb_content input[type=file] {
    display: none
  }
  
  .bomb_content img {
    margin-left: 8px;
  }
  
  .egRatio {
    width: 24%;
    top: 0;
    left: 180px;
    position: absolute;
    color: #a5a3a3;
  }
  
  
  .bomb_content .interest,
  .bomb_content .platform {
display: inline-block;
    width: calc(100% - 107px);
  }
  
  .bomb_content .platform li,
  .interest li {
    text-align: left;
    width: 20%;
    float: left;
    padding: 8px 0;
  }
  
  h4 {
    border-bottom: 1px solid rgb(229, 229, 229);
    margin-bottom: 12px;
    margin-top: 10px;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: left;
    line-height: 34px;
    padding-bottom: 10px;
  }
  
  .needmoney input {
    width: 50%;
  }
  
  .needmoney input[type=text] {
    width: 57%;
  }
  
  .browseunit input[type=text] {
    width: 31%;
  }
  .clickunit input[type=text] {
    width: 31%;
  }
  
  .dingxiang input[type=text] {
    width: 57%;
  }
  
  .interest li {
    width: 20%;
    float: left;
    padding: 10px 0;
  }
  .moneydafault p{
    float: left;
    margin: 0 10px;
    width:30%;
  }
  .moneydafault p input[type=text]{
    width:60%;
  }
  .fl{
    width: 50%;
    float: left;
    text-align: left;
  }
  .fr{
    width: 50%;
    float: right;
    text-align: left;
  }
  .modal-detail{
    margin-top: 89px;
  }
  .modal-detail p{
    font-size: 16px;
    margin:10px 0;
  }
  .modal-detail p:nth-of-type(1){
    width: 100%;
    text-align: left;
    padding-left: 15px;
    margin: 3px 0;
    padding-top: 4px;
  }
  #ad_queue{
    margin:10px 0;
  }
  #ad_queue span{
    font-size: 16px;
  }
  .half p{
    padding-left:0;
  }
  .half p input{
    width:160px!important;
  }
  
  .el-date-editor--datetime{
    margin-left: 8px!important;
  }
  .fr>.el-date-editor--datetime{
    margin-left: 29px!important;
  }
  ::-webkit-input-placeholder {
    color:#bfcbd9;  
}  
   table th{
    padding:0;
    height: 40px;
    line-height: 40px;
}
.table > tbody > tr{
    padding:0;
}
/*.table thead{
  background-color: #eef1f6;
}*/
.aa button{
  margin-left:8px;
}
.queuebox{
  margin-left: 82px;
  padding: 15px 0;
  border: 1px solid #cec4c4;
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
  width:83%;
}
.queuebox li{
    width: 30%;
    display: inline-block;
    position: relative;
    padding: 5px 0;
    margin: 0 7px;
}
.queuebox img{
  margin-left:0;
}
.advlist{
  border: 1px solid #9e9e9e;
  border-radius: 5px;
  padding:15px;
}
.advlist p{
  text-align: center;
  margin:0;
  font-size: 12px;
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.checkShall{
  display:none;
}
.checkedShall {
    display: block;
    width: 100%;
    padding: 15px;
    left: 0;
    margin: 0;
    height: 110px;
    background: rgba(0,0,0,0.5);
    position: absolute;
    border-radius: 5px;
}
.hbmanage{
   width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
}
</style>